import React, { Component } from 'react';
import * as echarts from 'echarts/core';
import {
    CanvasRenderer
} from 'echarts/renderers';
import {
    GlobeComponent
} from 'echarts-gl/components';
import {
    GridComponent
} from 'echarts/components';
import {
    BarChart
} from 'echarts/charts';
echarts.use(
    [GlobeComponent, CanvasRenderer, GridComponent, BarChart]
);
class Charts extends Component {
    state = {
        visible: false,
    }
    render() {
        return (
            <div>
                <div id="gg" style={{ height: '500px', width: "50%", float: 'left' }}>
                </div>

                <div id="pic" style={{ height: '500px', width: "500px", float: 'right' }}>
                </div>

            </div>
        );
    }
    componentDidMount() {
       
                this.Initcharts2()
                this.Initcharts1()
        
    }
    Initcharts1() {
        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

        var chartDom = document.getElementById('gg');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            backgroundColor: '#000',
            globe: {
                baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
                heightTexture: ROOT_PATH + "/data-gl/asset/bathymetry_bw_composite_4k.jpg",
                displacementScale: 0.2,
                shading: 'realistic',
                environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
                realisticMaterial: {
                    roughness: ROOT_PATH + '/asset/get/s/data-1497599804873-H1SHkG-mZ.jpg',
                    metalness: ROOT_PATH + '/asset/get/s/data-1497599800643-BJbHyGWQW.jpg',
                    textureTiling: [8, 4]
                },
                postEffect: {
                    enable: true
                },
                viewControl: {
                    autoRotate: false
                },
                light: {
                    main: {
                        intensity: 2,
                        shadow: true
                    },
                    ambientCubemap: {
                        texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
                        exposure: 2,
                        diffuseIntensity: 2,
                        specularIntensity: 2
                    }
                }
            }
        };

        option && myChart.setOption(option);
    }
    Initcharts2() {

        var chartDom = document.getElementById('pic');
        var myChart = echarts.init(chartDom);
        var option;
        var users = localStorage.getItem("userlength")?localStorage.getItem("userlength"):0
        var roles = localStorage.getItem("rolelength")?localStorage.getItem("rolelength"):0
        option = {
            xAxis: {
                type: 'category',
                data: ['用户人数', '角色']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [users, {
                    value: roles,
                    itemStyle: {
                        color: '#a90000'
                    }
                }],
                type: 'bar'
            }]
        };

        option && myChart.setOption(option);
    }
}

export default Charts;
